import {Link} from "react-router-dom"
import {Button, Form, Input, message} from "antd"
import {LockOutlined, LoginOutlined, MailOutlined, SolutionOutlined, UserOutlined} from "@ant-design/icons"
import {register} from "../../request/register"

function Register() {
    function onFinish(args) {
        register(args).then(() => {
            message.success('注册成功')
        }).catch(({msg}) => message.error(msg))
    }

    return (
        <>
            <div className="start-switch">
                <Link to="/start/login">
                    <span>已有账号? 去</span>
                    登录
                </Link>
            </div>
            <h1>商城-注册</h1>
            <div className="blank"></div>
            <Form onFinish={onFinish}>
                <Form.Item
                    name="uid"
                    rules={[
                        {
                            required: true,
                            message: '请输入账号',
                        },
                    ]}
                >
                    <Input prefix={<UserOutlined/>} placeholder="请输入账号"/>
                </Form.Item>

                <Form.Item
                    name="name"
                    rules={[
                        {
                            required: true,
                            message: '请输入姓名',
                        },
                    ]}
                >
                    <Input prefix={<SolutionOutlined/>} placeholder="请输入姓名"/>
                </Form.Item>

                <Form.Item
                    name="email"
                    rules={[
                        {
                            required: true,
                            message: '请输入邮箱',
                        },
                        {
                            pattern: /^\w+@[a-z]+(\.[a-z]+)*$/,
                            message: '请输入正确的邮箱格式'
                        }
                    ]}
                >
                    <Input prefix={<MailOutlined/>} placeholder="请输入邮箱"/>
                </Form.Item>

                <Form.Item
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '请输入密码',
                        },
                        {
                            pattern: /(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
                            message: '密码必须包含大小字母及数字'
                        },
                        {
                            min: 8,
                            max: 16,
                            message: '密码长度必须在8到16位之间'
                        }
                    ]}
                >
                    <Input.Password prefix={<LockOutlined/>} placeholder="请输入密码"/>
                </Form.Item>

                <Form.Item
                    name="password2"
                    rules={[
                        {
                            required: true,
                            message: '请再次输入密码',
                        },
                        ({getFieldValue}) => ({
                            validator(rule, value) {
                                if (!value || getFieldValue('password') === value) {
                                    return Promise.resolve()
                                }
                                return Promise.reject("两次密码输入不一致")
                            }
                        })
                    ]}
                >
                    <Input.Password prefix={<LockOutlined/>} placeholder="请再次输入密码"/>
                </Form.Item>

                <Form.Item className="btn-container">
                    <Button type="primary" htmlType="submit">
                        <span>注册</span>
                        <LoginOutlined/>
                    </Button>
                </Form.Item>
            </Form>
            <div className="blank"></div>
        </>
    )
}

export default Register